<template>
<div class="min-h-600">
    <div class="order-box car-main">
        <div class="nav-box">
            <img class="f1 nav-box-img" src="../assets/img/cart2.png">
            <ul class="nav-ul">
                <li class="active">购物车</li>
            </ul>
        </div>
        <ul class="car-nav">
            <li class="order-nav6">
                <div class="car-choice-btn car-choice-all" :class="$store.getters.getAllFlag===1?'car-xz':'car-wx'"
                @click="upAllFlag"></div>全选
            </li>
            <li class="order-nav1">商品</li>
            <li class="order-nav7">单价</li>
            <li class="order-nav7">数量</li>
            <li class="order-nav7">总价</li>
            <li class="order-nav7">操作</li>
        </ul>
        <div class="table-div" v-show="$store.getters.getNum>0&&$store.getters.isLogin">
            <table class="car-goods-box">
                <tbody>
                    <tr v-for="cart in $store.state.carts" :key="cart.id">
                        <td class="order-nav6">
                            <div class="car-choice-btn car-choice-one"
                            :class="cart.flag===1?'car-xz':'car-wx'" @click="changeOne(cart.id)"></div>
                        </td>
                        <td class="order-nav1">
                            <ul class="order-list-ul">
                                <li class="order-list-list flex">
                                    <div class="goods-thumbnail-box flex">
                                        <img class="goods-img" :src="getUrl(cart.id)">
                                    </div>
                                    <h4 class="goods-title">{{getTitle(cart.id)}}</h4>
                                </li>
                            </ul>
                        </td>
                        <td class="order-nav7">
                            ￥<span class="price-xj">{{getPrice(cart.id)}}</span>
                        </td>
                        <td class="order-nav7">
                            <div class="car-number-box">
                                <b class="car-reduce f1" @click="reduce(cart)">-</b>
                                <input class="car-number-input f1" v-model="cart.num">
                                <b class="car-add f1" @click="add(cart.id)">+</b>
                            </div>
                        </td>
                        <td class="order-nav7">
                            ￥<span class="price-xj">{{(getPrice(cart.id)*cart.num).toFixed(2)}}</span>
                        </td>
                        <td class="order-nav7">
                            <span class="order-del" @click="del(cart.id)">删除</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="car-pay" v-show="$store.getters.getNum>0&&$store.getters.isLogin">
            <a class="car-pay-a fr">去结算</a>
            <span class="fr">
                已选择<b class="sp-js">{{getFlagCart}}</b>件商品,
                总价:<b>￥<b class="price-js">{{getTotalPrice}}</b>元</b>
            </span>
        </div>
        <div class="default-box" v-show="$store.getters.getNum===0||!store.getters.isLogin">
            <img src="../assets/img/default_9.png">
            <p class="default-tip">尚未添加商品</p>
        </div>
    </div>
</div>
</template>
<script setup>
import books from '../assets/json/books.json'
import {computed} from 'vue'
import {useStore} from 'vuex'
const store = useStore()
const reduce = (cart)=>{
    if(cart.num>1){
        store.commit('reduce',cart.id)
    }
}
const add = (id)=>{
    store.commit('add',id)
}
const del = (id)=>{
    store.commit('delete',id)
}
const changeOne = (id)=>{
    store.commit('upFlag',id)
}
const getUrl = (id)=>{
    var url = books[id-1].image
    return new URL(url,import.meta.url).href
}
const getTitle = (id)=>{
    return books[id-1].title
}
const getPrice = (id)=>{
    return books[id-1].price
}
const upAllFlag = ()=>{
    if(store.getters.getAllFlag === 1){
        store.commit('upAllFlag',0)
    }else{
        store.commit('upAllFlag',1)
    }
}
const getTotalPrice = computed(()=>{
    var price = 0
    for(var cart of store.getters.getFlagCart){
        price = getPrice(cart.id)*cart.num+price
    }
    return price.toFixed(2)
})
const getFlagCart = computed(()=>{
    var num = 0
    for(var cart of store.getters.getFlagCart){
        num = num + cart.num
    }
    return num
})
</script>
<style scoped>
.table-div {
    min-height: 450px;
}

.default-box {
    width: 100%;
    height: 420px;
    padding-top: 120px;
    text-align: center;
    margin: 50px auto;
    background-color: #ffffff;
    border-radius: 10px;
    font-size: 20px;
    line-height: 80px;
    user-select: none;
}

.default-tip {
    font-size: 15px;
    color: #999999;
    margin: 0px;
}

.car-xz {
    background: url(../assets/img/xz.png) no-repeat center center;
}

input {
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.car-main {
    padding: 0;
    width: 1200px;
    border-radius: 0;
    margin: 0 auto;
}

.order-box {
    width: 1140px;
    /* padding: 40px;  */
    padding-left: 30px;
    padding-right: 30px;
    overflow: hidden;
    margin: 0 auto 0 auto;
    background-color: #ffffff;
    /* border-radius: 15px; */
    padding-bottom: 50px;
}

.nav-box {
    width: 1140px;
    height: 80px;
    user-select: none;
    margin: 0px;
    padding: 0px;
}

.f1 {
    float: left;
}

.nav-box-img {
    margin: 19px 30px 0 0;
}

img {
    border: none;
    vertical-align: middle;
    overflow: hidden;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

.nav-ul .active {
    font-size: 24px;
    font-weight: bold;
    color: #232F3D;
}

.nav-ul li {
    line-height: 80px;
    color: #333333;
    font-size: 18px;
    margin: 0px 25px;
    float: left;
    user-select: none;
    position: relative;
    list-style: none;
}

.nav-ul li.active {
    font-size: 24px;
    font-weight: bold;
    color: #232F3D;
}

.nav-ul li.active::before {
    content: '';
    width: 2px;
    height: 30px;
    background-color: #232F3D;
    position: absolute;
    left: -26px;
    top: 26px;
}

.car-nav {
    margin: 0;
    width: 1140px;
    margin-bottom: 0;
    height: 44px;
    line-height: 44px;
    border: 1px solid #e6e6e6;
    background-color: #f5f5f5;
    list-style: none;
    padding: 0;
}

.car-nav li {
    font-size: 16px;
    color: #333;
    font-weight: bolder;
    float: left;
    text-align: center;
}

.order-nav6 {
    width: 8%;
    text-align: left;
}

.car-choice-all {
    margin: 0 10px;
}

.car-choice-btn {
    margin-left: 23px;
    width: 16px;
    height: 16px;
    overflow: hidden;
    display: inline-block;
    cursor: pointer;
}

.car-wx {
    background: url(../assets/img/wx.png) no-repeat center center;
}

.order-nav1 {
    width: 32%;
}

.order-nav7 {
    width: 15%;
    font-weight: bolder;
}

.car-goods-box {
    width: 1142px;
    height: auto;
    border: 1px solid #e6e6e6;
    border-top: none;
    color: #333;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    user-select: none;
}

.car-goods-box tr td {
    border-bottom: 1px solid #e6e6e6;
}

table tr:last-child td {
    border-bottom: none;
}

.order-nav6 {
    width: 8%;
    text-align: left;
}

.order-nav1 {
    width: 32%;
}

.order-list-ul {
    width: calc(60% - 40px);
    height: auto;
    padding: 30px 20px;
    text-align: left;
    line-height: 24px;
    padding: 30px 0;
    width: 100%;
}

.order-list-ul li {
    width: 100%;
    font-weight: bolder;
}

.order-list-list:last-child {
    margin-bottom: 0;
}

.order-list-list {
    margin-bottom: 10px;
}

.flex {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-start;
    align-items: center;
}

.goods-thumbnail-box {
    margin-right: 10px;
    width: 50px;
    height: 50px;
    overflow: hidden;
    justify-content: center;
}

.goods-img {
    display: inline-block;
    max-height: 100%;
    max-width: 100%;
}

.goods-title {
    width: 100%;
    font-size: 14px;
    line-height: 18px;
}

.car-number-box {
    border: 1px solid #CBCBCB;
    width: 120px;
    line-height: 25px;
    height: 25px;
    overflow: hidden;
    margin: 0px auto;
}

.car-number-box b {
    width: 29px;
    display: inline-block;
    background: #f1f1f1;
    font-size: 15px;
    cursor: pointer;
}

.car-reduce {
    border-right: 1px solid #CBCBCB;
}

.fl {
    float: left;
}

.car-number-input {
    width: 60px;
    font-weight: 400;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    border: 0;
    text-align: center;
    /* -moz-appearance: textfield; */
}

.car-add {
    border-left: 1px solid #CBCBCB;
}

.order-del {
    color: #999;
    font-weight: 400;
}

.car-pay {
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    margin-bottom: 10px;
    width: 1142px;
    height: 54px;
    line-height: 54px;
    background-color: #fff;
    color: #373737;
    font-size: 14px;
    border: 1px solid #f1f1f1;
}

.car-pay span.car-pay-span {
    color: #333;
}

.car-pay span {
    font-size: 16px;
    font-weight: bolder;
    color: #888;
}

.car-pay-span {
    cursor: pointer;
}

.car-pay-a {
    margin-left: 20px;
    width: 90px;
    height: 52px;
    line-height: 52px;
    background-color: #e4272d;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bolder;
    text-align: center;
}

.fr {
    float: right;
}

a {
    text-decoration: none;
}

.car-pay b {
    color: #e4272d;
    margin: 0 5px;
}

td {
    margin: 0px;
}
</style>